<template>
  <div>
    <div class="big clearfix">
      <ul style="width: 60%; border: 1px solid #ccc; float: left">
        <li class="clearfix li1">
          <div class="o" style="float: left; color: black; font-size: 20px">待办事项</div>
          <div class="o" style="float: right"><a href="#" style="color: rgb(67, 214, 233)">查看更多</a></div>
        </li>
        <li class="clearfix li1">
          <div class="o aa" style="float: left">[待办事项] 您申请的报销还未审批，请及时查看，防止过期</div>
          <div class="o" style="float: right">2022年8月</div>
        </li>
        <li class="clearfix li1">
          <div class="o" style="float: left">[待办事项] 小红的请假申请还未审批，请及时查看</div>
          <div class="o" style="float: right">2022年8月</div>
        </li>
        <li class="clearfix li1">
          <div class="o" style="float: left">[待办事项] 小明的报销还未审批，请及时查看</div>
          <div class="o" style="float: right">2022年8月</div>
        </li>
        <li style="text-align: center" class="li1">
          <div class="o">暂无待办事项</div>
        </li>
      </ul>
      <el-calendar v-model="value" style="width: 35%; float: right; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5)"> </el-calendar>
    </div>
    <div class="big_two clearfix">
      <div class="left" style="float: left; border: 1px solid #ccc">
        <h2 style="padding: 10px 5px; border-bottom: 1px solid #ccc">员工数据</h2>
        <ul style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap">
          <li class="li2">
            <p>员工总人数</p>
            <p>2000人</p>
          </li>
          <li class="li2">
            <p>正式员工</p>
            <p>1000人</p>
          </li>
          <li class="li2 lii">
            <p>实习生</p>
            <p>15人</p>
          </li>
          <li class="li2">
            <p>本月待入职</p>
            <p>15人</p>
          </li>
          <li class="li2">
            <p>本月待离职</p>
            <p>13人</p>
          </li>
          <li class="li2 lii">
            <p>本月待转正</p>
            <p>3人</p>
          </li>
        </ul>
      </div>
      <div class="right" style="float: right">
        <h2 style="padding: 10px 20px; border-bottom: 1px solid #ccc">员工地区分布</h2>
        <div id="main"></div>
      </div>
    </div>
    <div class="zui" style="border: 1px solid #ccc; margin-top: 30px">
      <h2 style="padding: 10px 20px">员工生日</h2>
      <div id="main1"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      value: new Date()
    }
  },
  methods: {
    yuan() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '90%',
            data: [
              { value: 948, name: '东北' },
              { value: 735, name: '蒙古' },
              { value: 580, name: '河北' },
              { value: 484, name: '山西' },
              { value: 600, name: '河南' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    zhu() {
      var chartDom = document.getElementById('main1')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [100, 140, 230, 100, 130, 224, 151, 164, 196, 217, 219, 132],
            type: 'bar',
            barWith: '50%',
            color: '#b886f8'
          }
        ]
      }

      option && myChart.setOption(option)
    }
  },
  mounted() {
    this.yuan()

    this.zhu()
  }
}
</script>
<style src="../assets/base.css"></style>
<style scoped>
/* .aa{
  
  } */
.right {
  width: 50%;
  border: 1px solid #ccc;
}
.big_two {
  margin-top: 40px;
}
.li2 {
  width: 30%;
  margin: 10px 3px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.lii {
  border: 0;
}
.li1 {
  list-style: none;
  border: 1px solid #ccc;
  padding: 4px 4px;
  font-size: 13px;
}
.o {
  margin: 10px 10px;
  color: #ccc;
}
::v-deep .el-calendar__body {
  padding: 0;
}
::v-deep .el-calendar-table .el-calendar-day {
  height: 25px;
}
#main {
  height: 155px;
  /* width: 100; */
}
#main1 {
  width: 100%;
  height: 200px;
}
</style>
